<template>
    <div class="mod-home">
        <el-row :gutter="20" class="top">
            <el-col :span="10">
                <el-tabs type="border-card">
                    <el-tab-pane>
                        <span slot="label"><i class="el-icon-date"></i>待办信息</span>
                        <div class="renwu-box">
                            <div v-for="(task,index) of taskOList" :key="index" class="renwu-item">
                                <div class="renwu-title">
                                    <div class="title">{{ task.biz1 }}
                                    </div>
                                    <div class="renwu-title-btn">
                                        <el-button-group>
                                            <el-button size="small" @click="openGzDialog('1')">历史</el-button>
                                            <el-button size="small" @click="openNextAddDialog('1')">维护</el-button>
                                        </el-button-group>
                                    </div>
                                </div>
                                <div class="renwu-bottom">
                                    <div class="status">{{ task.statusName }}</div>
                                    <div class="type">大众五金-长期未订购关怀</div>
                                    <div class="tiem">{{task.planDayFrom}}</div>
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane>
                        <span slot="label"><i class="el-icon-date"></i> 已办任务</span>
                        <div class="renwu-box">
                            <div v-for="(task,index) of taskYList" :key="index" class="renwu-item">
                                <div class="renwu-title">
                                    <div class="title">{{ task.biz1 }}
                                    </div>
                                    <div class="renwu-title-btn">
<!--                                        <el-button-group>-->
<!--                                            <el-button size="small">转办</el-button>-->
<!--                                            <el-button size="small">协办</el-button>-->
<!--                                        </el-button-group>-->
                                    </div>
                                </div>
                                <div class="renwu-bottom">
                                    <div class="status">{{ task.statusName }}</div>
                                    <div class="type">{{task.planBussType}}</div>
                                    <div class="tiem">{{task.planDayFrom}}</div>
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>
<!--                    <el-tab-pane>-->
<!--                        <span slot="label"><i class="el-icon-date"></i> 协办任务</span>-->
<!--                        协办任务-->
<!--                    </el-tab-pane>-->
                </el-tabs>
            </el-col>
            <el-col :span="14">
                <div id="ldTable" style="height: 100%;width: 100%"></div>
            </el-col>
        </el-row>
        <el-row :gutter="20" class="bottom">
            <el-col :span="12">
                <div class="title">
                    <div>待关怀客户信息</div>
                    <div>
<!--                        <el-button-group>-->
<!--                            <el-button :type="khyjModel === 'charts' ? '' : 'primary'" size="small"-->
<!--                                       @click="khyjModel = 'table'">本月-->
<!--                            </el-button>-->
<!--                            <el-button :type="khyjModel === 'table' ? '' : 'primary'" size="small" @click="initKhyj">-->
<!--                                本季-->
<!--                            </el-button>-->
<!--                          <el-button :type="khyjModel === 'table' ? '' : 'primary'" size="small" @click="initKhyj">-->
<!--                            本年-->
<!--                          </el-button>-->
<!--                        </el-button-group>-->
                    </div>
                </div>
                <div style="height: calc(100% - 50px)">
                    <table-grid
                        v-if="khyjModel === 'table'"
                        ref="sxTableRef"
                        :showTableToolbar="false"
                        :tableColumn="khyjTableColumn"
                        :tableData="khyjTableData"
                        style="height: 100%;"
                    ></table-grid>
                    <div v-if="khyjModel === 'charts'" id="khyjTable" style="height: 100%;width: 100%"></div>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="title">
                    <div>人员业绩信息</div>
                    <div>
                        <el-button-group>
                           <el-button :type="ryyjModel === 'charts' ? '' : 'primary'" size="small"
                                     @click="ryyjModel = 'table'">本月
                           </el-button>
                            <el-button :type="''" size="small"
                                       @click="ryyjModel = 'table'">本季
                            </el-button>
                            <el-button :type="ryyjModel === 'table' ? '' : 'primary'" size="small" @click="initRyyj">
                                本年
                            </el-button>
                        </el-button-group>
                    </div>
                </div>
                <div style="height: calc(100% - 50px)">
                    <table-grid
                        v-if="ryyjModel === 'table'"
                        ref="sxTableRef"
                        :showTableToolbar="false"
                        :tableColumn="ryyjTableColumn"
                        :tableData="ryyjTableData"
                        style="height: 100%;"
                    ></table-grid>
                    <div v-if="ryyjModel === 'charts'" id="ryyjTable" style="height: 100%;width: 100%"></div>
                </div>
            </el-col>
        </el-row>
        <person ref="personRef" @confirm="personConfirm"></person>
        <oppo-next-list ref="oppoNextListRef"></oppo-next-list>
        <oppo-next-add ref="oppoNextAddRef"></oppo-next-add>
    </div>
</template>

<script>
import * as echarts from 'echarts'
import person from './components/person.vue'
import OppoNextList from "@/views/modules/relationship/oppo-next-list"
import OppoNextAdd from "@/views/modules/relationship/next-add-or-update";
export default {
    components: {
        person,
        OppoNextList,
        OppoNextAdd,
    },
	data () {
		return {
			khyjModel: 'table',
			ryyjModel: 'table',
			bmTableColumn: [
				{type: 'seq', width: 60},
				{field: 'code', title: '项目代码'},
				{field: 'name', title: '项目名称'},
				{field: 'gress', title: '进度'},
				{field: 'yqje', title: '预期金额'},
				{field: 'sjje', title: '实际金额'},
				{field: 'dcl', title: '达成率'},
			],
			bmTableData: [
				{
					code: 'somthing001',
					name: '事项名称001',
					jhsj: '2025-02-28 14:00',
					gress: '40%',
					yqje: 3000,
					sjje: 2000,
				},
				{
					code: 'somthing002',
					name: '事项名称002',
					jhsj: '2025-02-28 14:00',
					gress: '40%',
					yqje: 3000,
					sjje: 2000,
				},
			],
			khyjTableColumn: [
				{type: 'seq', width: 60},
				{field: 'cusName', title: '客户'},
				{field: 'planSalesAmt', title: '上次订购时间'},
				{field: 'factSalesAmt', title: '订购周期'},
				{field: 'planCompRate', title: '合同金额'},
        {field: 'planCompRate', title: '发货金额'}
			],
			khyjTableData: [],
			ryyjTableColumn: [
				{type: 'seq', width: 60},
				{field: 'empName', title: '人员 '},
				{field: 'sumScore', title: '发现客户'},
				{field: 'avgScore', title: '转化客户'},
        {field: 'avgScore', title: '合同金额'},
        {field: 'avgScore', title: '发货金额'},
			],
			ryyjTableData: [],
			taskList: [],
			taskOList: [],
			taskYList: [],
            chooseTask: null,
            chooseType: "1" //1 转办  2 协办
		}
	},
	mounted () {

		this.getTask()
		this.getCustDataList()
		this.getPersonDataList()
        this.getSJLDList()
	},
	methods: {
		openNewWindow (path) {
			const resolvedRoute = this.$router.resolve({path})
			window.open(resolvedRoute.href, '_blank')
		},
        openPerson(task,type){
            this.chooseTask = task;
            this.chooseType = type;
            this.$refs.personRef.init()
        },
        openGzDialog(id){
          this.$refs.oppoNextListRef.init(id)
        },
        openNextAddDialog(id){
          this.$refs.oppoNextAddRef.init(id)
        },
        personConfirm(person){
            if(this.chooseType === "1"){
                this.$http({
                    url: this.$http.adornUrl('/crm/transferOffice'),
                    method: 'post',
                    data: this.$http.adornData({
                        crmPlanDayWorkId: this.chooseTask.id,
                        userIdDest: person.id
                    })
                }).then(({data}) => {
                    console.log('🚀 ~ data', data)
                    this.$message.success("转办成功");
                    this.getTask()
                })
            }
            if(this.chooseType === "2"){
                this.$http({
                    url: this.$http.adornUrl('/crm/copyOffice'),
                    method: 'post',
                    data: this.$http.adornData({
                        crmPlanDayWorkId: this.chooseTask.id,
                        userIdDest: person.id
                    })
                }).then(({data}) => {
                    console.log('🚀 ~ data', data)
                    this.$message.success("协办成功");
                    this.getTask()
                })
            }
        },
		getTask () {
			this.$http({
				url: this.$http.adornUrl('/crm/month/plan/pageDayWork'),
				method: 'get',
				params: this.$http.adornParams({
					deptEmpNo: '0001',
				})
			}).then(({data}) => {
				console.log('🚀 ~ data', data)
				this.taskList = data.obj.records
				this.taskOList = []
				this.taskYList = []
				this.taskList.forEach((item) => {
					item.statusName = item.status === 'o' ? '进行中' : '已完成'
					if (item.status === 'o') {
						this.taskOList.push(item)
					}
					if (item.status === 'y') {
						this.taskYList.push(item)
					}
				})
			})
		},
        getSJLDList () {
            this.$http({
                url: this.$http.adornUrl('/crm/query/cusOppoQuery'),
                method: 'post',
                data: this.$http.adornData({

                })
            }).then(({data}) => {
                console.log('🚀 ~ data', data)
                this.initLd(data)
            })
        },
		getCustDataList () {
			this.$http({
				url: this.$http.adornUrl('/crm/query/khQuery'),
				method: 'post',
				data: this.$http.adornData({})
			}).then(({data}) => {
				console.log('🚀 ~ data', data)
				this.khyjTableData = data.obj

			})
		},
		getPersonDataList () {
			this.$http({
				url: this.$http.adornUrl('/crm/query/jxcQuery'),
				method: 'post',
				data: this.$http.adornData({})
			}).then(({data}) => {
				console.log('🚀 ~ data', data)
				this.ryyjTableData = data.obj

			})
		},
		initRyyj () {
			this.ryyjModel = 'charts'
			this.$nextTick(() => {
				// 基于准备好的dom，初始化echarts实例
				var myChart = echarts.init(document.getElementById('ryyjTable'))

				// 指定图表的配置项和数据
				var option = {
					title: {},
					tooltip: {},
					legend: {},
					xAxis: {
						data: ['人员1', '人员2', '人员3', '人员4']
					},
					yAxis: {},
					series: [
						{
							name: '业绩',
							type: 'bar',
							data: [2000, 3000, 4000, 5000]
						}
					]
				}

				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option)
			})
		},
		initKhyj () {
			this.khyjModel = 'charts'
			this.$nextTick(() => {
				// 基于准备好的dom，初始化echarts实例
				var myChart = echarts.init(document.getElementById('khyjTable'))

				// 指定图表的配置项和数据
				var option = {
					title: {},
					tooltip: {},
					legend: {},
					xAxis: {
						data: ['客户1', '客户2', '客户3', '客户4']
					},
					yAxis: {},
					series: [
						{
							name: '业绩',
							type: 'bar',
							data: [2000, 3000, 4000, 5000]
						}
					]
				}

				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option)
			})
		},
        initLd (data) {
            let legend = [];
            let chartData = [];
            let max = 0;
            let maxData = [];
            data.obj.forEach((item) => {
                legend.push(item.status)
                maxData.push(item.cusNums)
                chartData.push({
                    value: item.cusNums,
                    name: item.status
                })
            })
            max = Math.max(...maxData)
            this.$nextTick(() => {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('ldTable'))

                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '客户转换'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c}'
                    },
                    toolbox: {
                        feature: {
                            dataView: { readOnly: false },
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    legend: {
                        data: legend
                    },
                    series: [
                        {
                            name: '客户转换',
                            type: 'funnel',
                            left: '10%',
                            top: 60,
                            bottom: 60,
                            width: '80%',
                            min: 0,
                            max: max,
                            minSize: '0%',
                            maxSize: '100%',
                            sort: 'descending',
                            gap: 2,
                            label: {
                                show: true,
                                position: 'inside'
                            },
                            labelLine: {
                                length: 10,
                                lineStyle: {
                                    width: 1,
                                    type: 'solid'
                                }
                            },
                            itemStyle: {
                                borderColor: '#fff',
                                borderWidth: 1
                            },
                            emphasis: {
                                label: {
                                    fontSize: 20
                                }
                            },
                            data: chartData
                        }
                    ]
                }

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option)
            })
        },
	}
}
</script>

<style lang="scss" scoped>
.mod-home {
	display: flex;
	flex-direction: column;

	.top, .bottom {
		height: 50%;
	}

	.bottom {
		margin-top: 20px;
	}
}

.renwu-box {
	height: calc(100% - 40px);
	overflow-y: scroll;

	.renwu-item {
		height: 80px;
		width: 100%;
		border-bottom: 1px solid #f1f1f1;
		font-weight: bold;

		.renwu-title {
			display: flex;
			height: 40px;
			justify-content: space-between;
			align-items: center;

			.title {
				padding-left: 0;
			}
		}

		.renwu-title-btn {
			display: flex;
			width: 200px;
			justify-content: flex-end;
			align-items: center;
		}

		.renwu-bottom {
			display: flex;
			height: 40px;
			justify-content: space-between;
			align-items: center;
			font-size: 16px;

			.status {
				color: #409EFF;
			}
		}
	}
}

.title {
	height: 40px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 20px;
	font-weight: bold;
	padding-left: 4px;
}

::v-deep .avue-crud__menu {
	display: none !important;
}

::v-deep .el-col {
	height: 100%;
}
</style>

